<template>
  <div class="sticky-messenger flex column items-center" :style="`top: ${top + offset}px`">
    <q-btn class="to-top" flat icon="keyboard_arrow_up" @click="scrollToTop"></q-btn>
    <q-btn class="message" flat icon="message" @click="showFeedbackDialog">
      <div class="label">留言</div>
    </q-btn>
  </div>
</template>

<script>
import Vue from 'vue';
import mixins from 'eis-admin-mixins';

export default {
  name: 'StickyMessenger',
  mixins: [mixins.InputFieldValidator],
  props: {
    top: { type: Number, default: 0 },
    offset: { type: Number, default: 200 },
  },
  data() {
    return {
      feedback: {},
      fields: [
        {
          Type: 'Static',
          Default: '* 请告诉我们您的意见或建议或相关需求，我们竭诚为您服务!',
          class: 'title',
        },
        {
          Type: 'Category',
          Label: '您的留言',
        },
        {
          Type: 'Text',
          Name: '内容',
          Required: true,
        },
        {
          Type: 'Category',
          Label: '您的信息',
        },
        {
          Type: 'String',
          Name: '单位',
          Placeholder: '请填写您的企业名称',
          Required: true,
        },
        {
          Type: 'String',
          Name: '姓名',
          Placeholder: '请填写您的联系人名称',
          Required: true,
        },
        {
          Type: 'String',
          Name: '联系方式',
          Placeholder: '请填写您的联系电话',
          Required: true,
        },
      ],
    };
  },
  methods: {
    scrollToTop() {
      window.scrollTo(0, 0);
    },
    showFeedbackDialog() {
      this.feedback = {};
      Vue.prototype.$MsgDialog({
        type: '',
        fields: this.fields,
        size: { w: 580 },
        fieldsClass: 'feedback-dialog input-field-list full-width',
        fieldsData: this.feedback,
        canCancel: true,
        okText: this.$t('okButtonText'),
        cancelText: this.$t('cancelButtonText'),
      })
        .then(() => {
          this.sendFeedback();
        })
        .catch(() => {
          //
        });
    },
    showWeixinDialog() {
      Vue.prototype.getRequest('/portal/qrcodes').then((d) => {
        if (d && d.msg === 'OK') {
          this.showQRCodes(d.data);
        } else {
          this.showQRCodes();
        }
      }).catch(() => {
        this.showQRCodes();
      });

      Vue.prototype.$MsgDialog({
        type: '',
        fields: [
          {
            Type: 'Static',
            Tips: [
              {
                Text: '提示！扫描二维码，关注“投资促进服务平台”服务号，手机微信端随时为您服务。',
              }],
          },
          {
            Type: 'TzcjQrcodes',
          },
        ],
        size: { w: 550 },
        content: '关注微信',
        dialogClass: 'follow-weixin-dialog',
        okText: '关闭',
      })
        .then(() => {
          //
        })
        .catch(() => {
          //
        });
    },
    showQRCodes(codes) {
      let tip = '提示！扫描二维码，关注“投资促进服务平台”服务号，手机微信端随时为您服务。';
      let qrcodes;
      let relative;

      if (codes) {
        qrcodes = codes;
        tip = `提示！扫描二维码，关注"${codes.map((cd) => cd.description).join('"、"')}"，手机微信端随时为您服务。`;
        relative = false;
      }

      Vue.prototype.$MsgDialog({
        type: '',
        fields: [
          {
            Type: 'Static',
            Tips: [
              {
                Text: tip,
              }],
          },
          {
            Type: 'TzcjQrcodes',
            qrcodes,
            relative,
          },
        ],
        size: { w: 550 },
        content: '关注微信',
        dialogClass: 'follow-weixin-dialog',
        okText: '关闭',
      })
        .then(() => {
          //
        })
        .catch(() => {
          //
        });
    },
    sendFeedback() {
      Vue.prototype
        .postRequest('/portal/feedback', this.feedback)
        .then((d) => {
          if (d && d.msg === 'OK') {
            Vue.prototype.$MsgDialog({
              type: '',
              content: '感谢您的反馈',
              tips: '我们会尽快处理并在必要时与您取得联系。',
            });
          } else {
            this.$q.notify('提交反馈失败！');
          }
        })
        .catch(() => {
          this.$q.notify('提交反馈失败！');
        });
    },
    toManualClicked() {
      window.open('/manual');
    },
  },
};
</script>

<style lang="sass">
.sticky-messenger
  position: absolute
  // right: -49px
  right: 0
  z-index: 2001
  .to-top
    width: 48px
    height: 24px
    font-size: 11px
    font-weight: 400
    color: rgba(255,255,255,1)
    background: rgba(0,0,0,1)
    opacity: 0.45
    border-radius: 5px 5px 5px 5px
    margin-bottom: 2px
  .message
    width: 48px
    height: 48px
    font-size: 11px
    font-weight: 400
    color: rgba(255,255,255,1)
    background: rgba(136,171,218,1)
    opacity: 0.45
    border-radius: 5px 5px 5px 5px
    margin-bottom: 2px
    .label
      font-weight: 700
      width: 48px
      white-space: nowrap
.feedback-dialog.input-field-list
  .title
    padding: 0 70px
    color: #FF1D3F
    font-size: 14px
  .simple-field .q-field, .simple-field .q-field__control
    width: 100%
  .input-field-wrapper-您的留言,.input-field-wrapper-您的信息
    margin-bottom: 0
  .input-field-wrapper-Message,.input-field-wrapper-Company
    margin-top: 0
.follow-weixin-dialog
  .title
    font-size: 16px
    font-weight: bold
    color: rgba(0,0,0,1)
    margin-top: 16px
  .dialog-icon
    width: 114px !important
    height: 114px !important
    position: absolute !important
    top: 114px !important
    left: 218px !important
    margin: 10px auto !important
  .input-field-tips
    margin: 0 48px
    .tip-text
      display: inline-block
      text-align: center
  .qrcode-list
    .qrcode-item
      width: 250px
    .qrcode
      width: 120px
      height: 120px
    .qrcode-description
      width: 230px
      font-size: 14px
      color: $grey-6
</style>
